<template>
  <div class="basic-bar-chart">
    <!-- 图表标题区域 -->
    <!-- <div class="chart-title-section">
      <h3>生产报表</h3>
    </div> -->
    
    <!-- ECharts图表容器 -->
    <div id="main3" class="chart-container"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted, onUnmounted } from 'vue';

// 注册ECharts组件
echarts.use([GridComponent, BarChart, CanvasRenderer]);

onMounted(() => {
  // 确保DOM元素加载完成后初始化图表
  const chartDom = document.getElementById('main3');
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    
    const option = {
      title: {
        text: '成品销量',
        // 调整标题位置，与外部标题呼应
        left: 'center',
        textStyle: {
          fontSize: 16,
          color: '#333'
        }
      },
      toolbox: {
        feature: {
          saveAsImage: {
            iconStyle: {
              color: '#666'
            },
            title: '保存图表'
          }
        },
        right: 10,
      },
      grid: {
        // 预留空间：为图例、坐标轴标签留出位置
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '18%', // 为顶部图例预留空间
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['收胚', '松布退卷', '出缸', '开幡', '成品', '打样', '出库'],
        axisLine: {
          lineStyle: {
            color: '#e0e0e0'
          }
        },
        axisLabel: {
          color: '#666'
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#f5f5f5'
          }
        },
        axisLabel: {
          color: '#666'
        }
      },
      series: [
        {
          showBackground: true,
          data: [
          {
              value: 200,
              itemStyle: {
                color: '#3281b3' // 特殊高亮的柱子
              }
            },
            {
              value: 123,
              itemStyle: {
                color: '#b6aa6d' // 特殊高亮的柱子
              }
            },
            {
              value: 150,
              itemStyle: {
                color: '#b2759f' // 特殊高亮的柱子
              }
            },
            {
              value: 120,
              itemStyle: {
                color: '#afca6f' // 特殊高亮的柱子
              }
            },
            {
              value: 110,
              itemStyle: {
                color: '#6baad3' // 特殊高亮的柱子
              }
            },
            {
              value: 150,
              itemStyle: {
                color: '#bfb381' // 特殊高亮的柱子
              }
            },
            {
              value: 300,
              itemStyle: {
                color: '#b77fa3' // 特殊高亮的柱子
              }
            },
          ],
          type: 'bar',
          itemStyle: {
            color: '#6386c8', // 默认柱子颜色
            borderRadius: [4, 4, 0, 0]
          },
          barWidth: '60%',
          animationDuration: 1500
        }
      ]
    };

    option && myChart.setOption(option);

    // 窗口大小变化时重绘图表
    const handleResize = () => {
      myChart.resize();
    };
    window.addEventListener('resize', handleResize);

    // 组件卸载时清理资源
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
      myChart.dispose();
    });
  }
});
</script>

<style scoped>
.basic-bar-chart {
  width: 100%;
  min-height: 500px;
  margin: 10px auto;
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chart-title-section {
  margin-bottom: 16px;
}

h3 {
  margin: 0 0 8px 0;
  color: #333333;
  font-size: 18px;
  font-weight: 600;
}

.chart-caption {
  margin: 0;
  color: #666666;
  font-size: 14px;
  line-height: 1.5;
}

.chart-container {
  width: 100%;
  height: 350px; /* 确保图表有明确的高度 */
}

/* 响应式调整 */
@media (max-width: 600px) {
  .basic-bar-chart {
    padding: 15px;
  }
  
  .chart-container {
    height: 300px;
  }
}
</style>
